<template>
	<view class="edit-address">
		<u--form :model="userInfo" labelWidth="80" :errorType="errorType" :rules="rules" ref="uForm">
			<u-form-item label="收货人:" prop="real_name" borderBottom>
				<u--input v-model="userInfo.real_name" border="none" placeholder="请输入收货人姓名"></u--input>
			</u-form-item>
			<u-form-item label="手机号码:" prop="phone" borderBottom>
				<u--input v-model="userInfo.phone" border="none" placeholder="请输入收货人手机号码"></u--input>
			</u-form-item>
			<u-form-item label="所在地区:" prop="area" borderBottom>
				<uni-data-picker :localdata="areas" v-model="userInfo.area" :border="false"
					@change="handlePickerChange"></uni-data-picker>
			</u-form-item>
			<u-form-item label="详细地址:" prop="detail" borderBottom>
				<u--textarea style="border: none;" v-model="userInfo.detail" confirm-type="send"
					placeholder="门牌/楼层等"></u--textarea>
			</u-form-item>
			<u-form-item label="默认地址:" prop="is_default" borderBottom>
				<view class="address-default">
					<u-switch v-model="userInfo.is_default" :activeValue="1" :inactiveValue="0" activeColor="#5ac725"
						inactiveColor="rgb(230, 230, 230)"></u-switch>
				</view>
			</u-form-item>
		</u--form>

		<view class="save-edit" @click="submit">添加</view>
	</view>
</template>

<script>
	import { user } from "../../../../api/index.js";
	export default {
		onLoad() {
			this.getDataPicker();
		},
		data() {
			return {
				userInfo: {
					real_name: '',
					phone: '',
					is_default: 0,
					area: [],
					detail: '',
					address: {
						province: '',
						city: '',
						district: '',
						city_id: 0,
					},
				},
				id: 0,
				index: 0,
				areas: [],

				// 文字提示
				errorType: 'message',
				rules: {
					// 字段名称
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					real_name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			// 获取省市区数据
			async getDataPicker() {
				let { status, msg, data } = await user.city_list();
				if (status === 200) {
					this.areas = this.action(data);
				}
			},
			handlePickerChange(event) {
				const { value } = event.detail;
				if (value.length) {
					this.userInfo.address.province = value[0].text;
					this.userInfo.address.city = value[1].text;
					this.userInfo.address.district = value[2].text;
					this.userInfo.address.city_id = value[1].value;
				}
			},
			submit() {
				this.$refs.uForm.validate().then(async res => {
					let { status, msg } = await user.edit_address(this.userInfo);
					if (status === 200) {
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'success'
						});
						uni.navigateTo({
							url: '/pages/user/address/list/list',
						});
					}
				}).catch(errors => {
					uni.$u.toast('请填写好相关信息！')
				})
			},
			action(data) { // 使用递归函数
				// if(!(data?.length <= 0)){ 
				// 等价于
				if (!data || data.length <= 0) { // 递归的出口
					return null;
				}
				return data.map(x => {
					// 把后端返回过来的数据里面的键给替换成我想要的键
					const model = {
						text: x.n,
						value: x.v,
					};
					// 子级数据
					const children = this.action(x.c);
					// 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
					if (children) {
						model.children = children;
					}
					return model;
				});
			}
		}
	}
</script>

<style lang="scss">
	.edit-address {
		padding: 20rpx;
	}

	.save-edit {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 708rpx;
		background-color: #c55a5c;
		font-size: 28rpx;
		color: #ffffff;
		margin: 0 auto;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 10rpx;
	}

	.address-default {
		width: 100%;
		padding-right: 20rpx;
		display: flex;
		justify-content: flex-end;
	}
</style>